<template>
  <div>

    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">电力巡检系统</el-breadcrumb-item>
      <el-breadcrumb-item>杆塔管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!--查询杆塔和添加杆塔区-->
    <el-row>
      <!--条件查询-->
      <el-col :span="20">
        <div class="grid-content bg-purple">
          <el-form :inline="true" :model="formFild" ref="findFormRef" class="demo-form-inline">

            <el-form-item>
              <el-input v-model="formFild.pole.poleId" placeholder="杆塔编号" :clearable="true"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="formFild.pole.poleAddress" placeholder="杆塔地址" :clearable="true"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="formFild.pole.poleStatus" placeholder="杆塔状态" :clearable="true"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="findPole" icon="el-icon-search">查询</el-button>
            </el-form-item>

          </el-form>
        </div>
      </el-col>

      <el-col :span="4">
        <div class="grid-content bg-purple-light">
          <!--添加杆塔按钮-->
          <el-button type="primary" icon="el-icon-circle-plus-outline" @click="insertDialog = true">添加杆塔</el-button>
          <!--添加杆塔的对话框-->
          <el-dialog title="添加杆塔" :visible.sync="insertDialog" width="30%">
            <el-form :model="insertForm" :rules="insertFormRules" ref="insertFormRef">
              <el-form-item label="杆塔编号：" :label-width="formLabelWidth" prop="poleId">
                <el-input v-model="insertForm.poleId" autocomplete="off" size="mini" :clearable="true"></el-input>
              </el-form-item>
              <el-form-item label="杆塔线路：" :label-width="formLabelWidth" prop="poleAddress">
                <el-input v-model="insertForm.poleAddress" autocomplete="off" size="mini" :clearable="true"></el-input>
              </el-form-item>
              <el-form-item label="启用状态：" :label-width="formLabelWidth">
                <el-radio v-model="insertForm.poleStatus" label="启用">启用</el-radio>
                <el-radio v-model="insertForm.poleStatus" label="禁用">禁用</el-radio>
              </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
              <el-button @click="insertDialog = false">取 消</el-button>
              <el-button type="primary" @click="addTower()">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </el-col>

    </el-row>


    <!--杆塔列表区-->
    <el-row>
      <el-table :data="tableData" border stripe>

        <el-table-column prop="poleId" label="杆塔编号"></el-table-column>

        <el-table-column prop="poleAddress" label="杆塔地址"></el-table-column>

        <el-table-column prop="poleStatus" label="杆塔状态">
              <template slot-scope="scope"><el-switch v-model="scope.row.poleStatus" active-value="启用" inactive-value="禁用" @change="editTowerByStatus(scope.row)"></el-switch></template>
        </el-table-column>

        <el-table-column prop="right" label="操作">
          <template slot-scope="scope">

            <!--修改按钮-->
            <!--<el-button type="primary" icon="el-icon-edit" size="mini" @click="updateTower = true">修改</el-button>-->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="getTower(scope.$index, scope.row)">修改</el-button>

            <!--删除按钮-->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteTower(scope.row)">删除</el-button>

          </template>
        </el-table-column>

      </el-table>
    </el-row>

    <!--修改对话框-->
    <el-dialog title="修改杆塔" :visible.sync="updateDialog" width="30%">

        <el-form :model="updateForm" :rules="updateFormRules" ref="updateFormRef">

          <el-form-item label="杆塔编号：" :label-width="formLabelWidth" prop="poleId">
              <el-input v-model="updateForm.poleId" autocomplete="off" size="mini" :clearable="true" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="杆塔线路：" :label-width="formLabelWidth" prop="poleAddress">
            <el-input v-model="updateForm.poleAddress" autocomplete="off" size="mini" :clearable="true"></el-input>
          </el-form-item>

          <el-form-item label="启用状态：" :label-width="formLabelWidth">
            <el-radio v-model="updateForm.poleStatus" label="启用">启用</el-radio>
            <el-radio v-model="updateForm.poleStatus" label="禁用">禁用</el-radio>
          </el-form-item>

        </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button @click="updateDialog = false">取 消</el-button>
        <el-button type="primary" @click="editTower">确 定</el-button>
      </div>
    </el-dialog>

    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="formFild.pageNum"
            :page-sizes="[5, 4, 3, 2, 1]"
            :page-size="formFild.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

  </div>
</template>

<script>

  export default {
    name: "Tower",
    data() {
      return {
        // 杆塔列表数据
        tableData: [],
        // 作用域：包含整列的数据
        scope: [],

        // 查找杆塔的条件
        formFild: {
          pole: {
            poleId: null,
            poleAddress: null,
            poleStatus: null
          },
          // 当前的页数
          pageNum: 1,
          // 每页的数量
          pageSize: 5
        },
        // 总条数
        total: 0,


        // 添加杆塔
        // 对话框的状态
        insertDialog: false,
        insertForm: {
          poleId: '',
          poleAddress: '',
          poleStatus: '启用'
        },
        // 添加杆塔的验证规则
        insertFormRules: {
          poleId: [
            { required: true, message: '请输入杆塔编号', trigger: 'blur' },
            { min: 10, max: 10, message: '杆塔编号为10位', trigger: 'blur'}
          ],

          poleAddress: [
            { required: true, message: '请输入杆塔线路', trigger: 'blur' },
          ]
        },
        // 表单标签的宽度
        formLabelWidth: '100px',


        // 修改杆塔
        // 对话框的状态
        updateDialog: false,
        updateForm: {
          poleId: '',
          poleAddress: '',
          poleStatus: ''
        },


        // 修改杆塔的验证规则
        updateFormRules: {
          // poleId: [
          //   { required: true, message: '请输入杆塔编号', trigger: 'blur' },
          //   { min: 10, max: 10, message: '杆塔编号为10位', trigger: 'blur'}
          // ],
          poleAddress: [
            { required: true, message: '请输入杆塔线路', trigger: 'blur' },
          ]
        },
      }
    },


    methods: {
      // 查询所有杆塔
      listAll() {
        this.axios.get('/pole/list').then(res=> {
          let result = res.data
          // console.log(res)
          // 第一页的杆塔信息
          this.tableData = result.list
          // 得到杆塔信息的总条数
          this.total = result.total
        })
      },


      // 根据杆塔信息进行查询
      findPole() {
        // 判断杆塔编号不为空或空字符串时，是否为10位
        if (this.formFild.pole.poleId != null && this.formFild.pole.poleId.length != 0) {
          if (this.formFild.pole.poleId.length != 10) {
            this.$message.warning("杆塔编号不为10位")
            // 表格数据为空
            this.tableData = []
            // 设置总数为0
            this.total = 0
            return
          }
        }

        // 发送请求
        this.axios.post('/pole/query', this.formFild).then(res=> {
          // 保存查询到的信息
          let result = res.data
          let empty = this.formFild.pole.poleId == null && this.formFild.pole.poleAddress == null && this.formFild.pole.poleStatus == null

          // console.log(res)
          // 如果状态码为200查询成功，否则查询失败
          if (result.code == 200) {
            // 如果页码为1，提示查询成功
            if (result.data.pageNum == 1 && !empty) {
              // 提示查询成功
              this.$message.success(result.message)
            }
            // 保存查询到的总数
            this.total = result.data.total
            // 将查询到的数据保存到表格
            this.tableData = result.data.list
          }else {
            // 失败
            this.$message.error(result.message)
            // 表格数据为空
            this.tableData = []
            // 设置总数为0
            this.total = 0
          }
        })
      },

      findChangePole() {
        // 判断杆塔编号不为空或空字符串时，是否为10位
        if (this.formFild.pole.poleId != null && this.formFild.pole.poleId.length != 0) {
          if (this.formFild.pole.poleId.length != 10) {
            this.$message.warning("杆塔编号不为10位")
            // 表格数据为空
            this.tableData = []
            // 设置总数为0
            this.total = 0
            return
          }
        }

        // 发送请求
        this.axios.post('/pole/query', this.formFild).then(res=> {
          // 保存查询到的信息
          let result = res.data
          let empty = this.formFild.pole.poleId == null && this.formFild.pole.poleAddress == null && this.formFild.pole.poleStatus == null

          // console.log(res)
          // 如果状态码为200查询成功，否则查询失败
          if (result.code == 200) {

            // 保存查询到的总数
            this.total = result.data.total
            // 将查询到的数据保存到表格
            this.tableData = result.data.list
          }else {
            // 失败
            this.$message.error(result.message)
            // 表格数据为空
            this.tableData = []
            // 设置总数为0
            this.total = 0
          }
        })
      },
      // 添加杆塔信息
      addTower() {
        // console.log(this.insertForm)
        // 发送请求
        this.axios.post('/pole/add', this.insertForm).then(res=> {
          let result = res.data
          // console.log(res)
          // 添加成功
          if (result.code == 200) {
            this.$message.success(result.message)
            // 隐藏对话框
            this.insertDialog = false
            // 设置页码为1
            this.formFild.pageNum = 1
            // 重新加载杆塔信息
            this.listAll()
            // 清除对话框数据
            this.insertForm = {}
          }else {
            // 添加失败
            this.$message.error(result.message)
          }
        })
      },


      // 修改杆塔信息
      // 得到需要修改的杆塔信息
      getTower(index, row) {
        // 将需要修改的杆塔信息保存
        this.updateForm.poleId = row.poleId
        this.updateForm.poleAddress = row.poleAddress
        this.updateForm.poleStatus = row.poleStatus
        // 设置修改杆塔的对话框的状态
        this.updateDialog = true
      },
      // 修改操作
      editTower() {
        // 发送请求
        this.axios.post('/pole/update', this.updateForm).then(res=> {
          let result = res.data
          // console.log(res)
          // 修改成功
          if (result.code == 200) {
            this.$message.success(result.message)
            // 隐藏对话框
            this.updateDialog = false
            // 重新加载杆塔信息
            this.findChangePole()
          }else {
            this.$message.error(result.message)
          }
        })
      },


      // 杆塔状态修改
      editTowerByStatus(row) {
        // 打印
        // console.log(row.poleStatus)
        // console.log(row.poleId)
        // console.log(row.poleAddress)

        // 保存修改的杆塔状态
        this.updateForm.poleId = row.poleId
        this.updateForm.poleAddress = row.poleAddress
        this.updateForm.poleStatus = row.poleStatus

        // 调用修改操作
        this.editTower()
      },



      // 删除杆塔
      deleteTower(row) {
        // 保存需要删除的杆塔编号
        let poleId = row.poleId
        // console.log(poleId)
        // 发送请求
        this.axios.get('/pole/delete',{params: {'poleId':poleId}}).then(res=> {
          let result = res.data
          //console.log(result)
          // 成功
          if (result.code == 200) {
            this.$message.success(result.message)
            // 设置页码为1
            this.formFild.pageNum = 1
            // 重新加载杆塔信息
            this.listAll()
          } else {
            this.$message.error(result.message)
          }

        })

      },

      // 监听每页的数量改变的事件
      handleSizeChange(newSize) {
        // 条件查询（每页数量）
        this.formFild.pageSize = newSize
        // 调用条件查询
        this.findPole()
      },

      //  监听页码值改变的事件
      handleCurrentChange(newNum) {

        // 条件查询（页码）
        this.formFild.pageNum = newNum
        // 调用条件查询
        this.findChangePole()
      }
    },
    // 挂载元素之后
    mounted() {
        // 查询全部
      this.listAll()
    }
  }
</script>

<style scoped>

</style>
